import { toTree } from '@/utils';
import { Row } from 'antd';
import { useCallback, useContext, useEffect, useState } from 'react';
import { IAuthOtherSteps } from '../../type';
import { AuthorizationContext, useJurisAndOperaReq } from '../AuthHooks';
import { AuthSecondLeftTree } from './AuthSecondLeftTree';
import { AuthSecondRightCard } from './AuthSecondRightCard';

export const AuthSecondSteps: React.FC<IAuthOtherSteps> = ({
  leftTreeData,
}) => {
  const { prefixCls, roleAuthDetailInfo, secondSaveIdList } =
    useContext(AuthorizationContext); //获取 上下文
  const { onMenuSelectChange, jurisTableData } = useJurisAndOperaReq();
  const [saveSenondIds, setSaveSenondIds] = useState<any>(null);
  const setSaveSenond = useCallback(
    (idList: any) => {
      setSaveSenondIds(idList);
    },
    [saveSenondIds],
  );

  useEffect(() => {
    let defaultIDS: any = [];
    if (roleAuthDetailInfo?.id && roleAuthDetailInfo?.paramObject) {
      roleAuthDetailInfo?.paramObject?.scope?.map((item: any) => {
        defaultIDS?.push(item?.id);
      });
    }
    if (secondSaveIdList) {
      setSaveSenond(secondSaveIdList);
    } else {
      setSaveSenond(defaultIDS);
    }
  }, [roleAuthDetailInfo?.id]);

  return (
    <>
      <Row
        style={{ height: '100%', overflow: 'hidden' }}
        className={prefixCls + 'step-cardRole'}
      >
        <AuthSecondLeftTree
          secondLeftTree={toTree(leftTreeData)}
          onMenuSelectChange={onMenuSelectChange}
        />

        <AuthSecondRightCard
          leftDataTree={leftTreeData}
          secondRightData={jurisTableData}
          defaultSecIDList={saveSenondIds}
        />
      </Row>
    </>
  );
};
